"use client"

import { useState } from "react"
import { Button, Image, Steps } from "antd"
import { LeftOutlined, MoreOutlined, EnvironmentOutlined, RightOutlined, CheckOutlined } from "@ant-design/icons"
import "./OrderDetails.css"
import { useNavigate } from "react-router-dom"

const OrderDetails = () => {
  const navigate = useNavigate()

  const orderInfo = {
    orderId: "DD20230615123456",
    createTime: "2023-06-15 12:34:56",
    status: "shipped", // 'pending', 'shipped', 'delivered'
    address: {
      name: "大爽",
      phone: "18033441849",
      detail: "广东省 深圳市 福田区 深南大道",
    },
    product: {
      name: "小米12 Pro 天玑版 天玑9000+芯片组 5G手机",
      specs: "颜色:深蓝色铁金 128G",
      price: 2999,
      quantity: 1,
      image: "https://img14.360buyimg.com/pop/jfs/t1/111338/15/29283/89392/62c2dd8eEf74767d5/4f0d28840e12d45f.jpg",
    },
    pricing: {
      subtotal: 2999,
      shipping: 0,
      discount: 200,
      couponDiscount: 0,
      pointsDiscount: 0,
      paymentMethod: "支付宝",
    },
    logistics: [
      // {
      //   time: "2023-06-16 15:20:00",
      //   location: "深圳市",
      //   status: "已签收",
      //   description: "您的包裹已被签收",
      // },
      // {
      //   time: "2023-06-16 10:05:00",
      //   location: "深圳市",
      //   status: "派送中",
      //   description: "快递员正在派送",
      // },
      // {
      //   time: "2023-06-15 18:30:00",
      //   location: "深圳市转运中心",
      //   status: "已发往目的地",
      //   description: "已从转运中心发出",
      // },
      {
        time: "2023-06-15 16:45:00",
        location: "商家仓库",
        status: "已发货",
        description: "商家已发货，等待物流公司揽件",
      },
    ],
  }

  const finalTotal =
    orderInfo.pricing.subtotal +
    orderInfo.pricing.shipping -
    orderInfo.pricing.discount -
    orderInfo.pricing.couponDiscount -
    orderInfo.pricing.pointsDiscount

  const handleBack = () => {
    navigate(-1)
  }

  const handleMenu = () => {
    console.log("菜单")
  }

  const getStatusText = () => {
    switch (orderInfo.status) {
      case 'pending':
        return '待发货'
      case 'shipped':
        return '已发货'
      case 'delivered':
        return '已签收'
      default:
        return '订单已创建'
    }
  }

  return (
    <div className="order-container">
      {/* 顶部导航栏 */}
      <div className="order-header">
        <Button type="text" icon={<LeftOutlined />} className="back-btn" onClick={handleBack} />
        <div className="order-header-title">订单详情</div>
        <Button type="text" icon={<MoreOutlined />} className="menu-btn" onClick={handleMenu} />
      </div>

      {/* 主要内容 */}
      <div className="order-content">
        {/* 物流进度 */}
        <div className="section-card">
          <div className="section-title">物流进度</div>
          <div className="section-body">
            <div className="logistics-status">
              <div className="status-text">{getStatusText()}</div>
              <div className="steps-container">
                <Steps direction="vertical" current={1} status="process">
                  {orderInfo.logistics.map((log, index) => (
                    <Steps.Step
                      key={index}
                      title={<span className="step-title">{log.status}</span>}
                      subTitle={<span className="step-time">{log.time}</span>}
                      description={
                        <div className="step-description">
                          <div>{log.location}</div>
                          <div>{log.description}</div>
                        </div>
                      }
                      icon={index === 0 ? <CheckOutlined /> : null}
                    />
                  ))}
                </Steps>
              </div>
            </div>
          </div>
        </div>

        {/* 商品信息 */}
        <div className="section-card">
          <div className="section-title">商品信息</div>
          <div className="section-body">
            <div className="product-item">
              <Image
                src={orderInfo.product.image || "/placeholder.svg"}
                alt="商品图片"
                width={60}
                height={60}
                className="product-image"
                preview={false}
              />
              <div className="product-details">
                <div className="product-name">{orderInfo.product.name}</div>
                <div className="product-specs">{orderInfo.product.specs}</div>
                <div className="product-price-quantity">
                  <span className="product-price">¥{orderInfo.product.price}</span>
                  <span className="product-quantity">x{orderInfo.product.quantity}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 收货信息 */}
        <div className="section-card">
          <div className="section-title">收货信息</div>
          <div className="section-body">
            <div className="info-item">
              <span className="info-label">收货人</span>
              <span className="info-value">{orderInfo.address.name}</span>
            </div>
            <div className="info-item">
              <span className="info-label">联系方式</span>
              <span className="info-value">{orderInfo.address.phone}</span>
            </div>
            <div className="info-item">
              <span className="info-label">收货地址</span>
              <span className="info-value">{orderInfo.address.detail}</span>
            </div>
          </div>
        </div>

        {/* 订单信息 */}
        <div className="section-card">
          <div className="section-title">订单信息</div>
          <div className="section-body">
            <div className="info-item">
              <span className="info-label">订单编号</span>
              <span className="info-value">{orderInfo.orderId}</span>
            </div>
            <div className="info-item">
              <span className="info-label">创建时间</span>
              <span className="info-value">{orderInfo.createTime}</span>
            </div>
            <div className="info-item">
              <span className="info-label">支付方式</span>
              <span className="info-value">{orderInfo.pricing.paymentMethod}</span>
            </div>
          </div>
        </div>

        {/* 价格信息 */}
        <div className="section-card">
          <div className="section-title">价格信息</div>
          <div className="section-body">
            <div className="price-item">
              <span className="price-label">商品总价</span>
              <span className="price-value">¥{orderInfo.pricing.subtotal}</span>
            </div>
            <div className="price-item">
              <span className="price-label">运费</span>
              <span className="price-value free">¥{orderInfo.pricing.shipping}</span>
            </div>
            <div className="price-item">
              <span className="price-label">活动优惠</span>
              <span className="price-value discount">-¥{orderInfo.pricing.discount}</span>
            </div>
            <div className="price-item">
              <span className="price-label">优惠券</span>
              <span className="price-value discount">-¥{orderInfo.pricing.couponDiscount}</span>
            </div>
            <div className="price-item">
              <span className="price-label">积分抵扣</span>
              <span className="price-value discount">-¥{orderInfo.pricing.pointsDiscount}</span>
            </div>
            <div className="price-total">
              <span className="total-label">实付款</span>
              <span className="total-amount">¥{finalTotal}</span>
            </div>
          </div>
        </div>
      </div>

      {/* 底部操作区域 */}
      {orderInfo.status !== 'delivered' && (
        <div className="order-bottom">
          <div className="order-bottom-content" style={{ 
            display: 'flex', 
            justifyContent: 'flex-end', 
            gap: '16px' 
          }}>
            <Button type="primary" className="submit-btn">
              联系客服
            </Button>
            <Button type="primary" className="submit-btn">
              联系商家
            </Button>
            <Button type="primary" className="submit-btn">
              申请售后
            </Button>
            <Button type="primary" className="submit-btn">
              确认收货
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}

export default OrderDetails